|
- import type {GetStaticPaths, GetStaticProps, NextPage} from 'next';
- import * as fs from 'fs/promises';
- import * as path from 'path';
- import * as React from 'react'
- import {useRouter} from 'next/router';
- import ReactMarkdown from 'react-markdown';
- import {DocsLayout, Page} from '@/components/DocsLayout';
- import {getDocs, getPlatforms} from '@/utils/data';
-
- export interface Props {
- componentPages: { name: string; components: Page[] }[],
- docsPages: Page[],
- examplePages: Page[],
- markdown: string,
- platforms: string,
- platform: string,
- framework: string,
- }
-
- const InnerPage: NextPage<Props> = ({
- componentPages,
- examplePages,
- docsPages,
- markdown,
- platforms,
- platform,
- framework,
- }) => {
- const router = useRouter();
- const sidebarOpen = router.query.open === 'sidebar';
-
- return (
- <DocsLayout
- componentPages={componentPages}
- examplePages={examplePages}
- docsPages={docsPages}
- platforms={platforms}
- currentPlatform={framework}
- currentVersion="0.1.0"
- sidebarOpen={sidebarOpen}
- >
- {markdown && (
- <ReactMarkdown
- className="my-12 leading-loose"
- components={{
- ul: ({node, ordered: _ordered, ...props}) => (
- <ul
- {...props}
- className="list-disc pl-4"
- />
- ),
- li: ({node, ...props}) => (
- <li
- {...props}
- className="list-item pl-4"
- />
- ),
- }}
- >
- {markdown}
- </ReactMarkdown>
- )}
- <pre>
- <code>
- {JSON.stringify(componentPages, null, 2)}
- </code>
- </pre>
- </DocsLayout>
- )
- }
-
- export const getStaticProps: GetStaticProps = async (ctx) => {
- const { params } = ctx;
- const { url } = params as { url: string[] };
- const [platform, framework, ...etcUrl] = url;
-
- const props = {} as Record<string, unknown>;
- props.platform = platform;
- props.framework = framework;
-
- props.docsPages = await getDocs({
- deriveHrefFromFilename: d => `/docs/${
- d
- .replace(/\.md/i, '')
- .split('-')
- .slice(1)
- .join('-')
- }`,
- deriveLabelFromFilename: d => (
- d
- .split('-')
- .slice(1)
- .map((dd) => dd.slice(0, 1).toUpperCase() + dd.slice(1))
- .join(' ')
- .replace(/\.md/i, '')
- ),
- });
- props.platforms = await getPlatforms();
-
- // const categoriesPath = path.resolve('../../categories');
- // const categories = await fs.readdir(categoriesPath);
- // props.componentPages = categories.map((c) => ({
- // id: c,
- // href: `/categories/${c}`,
- // label: c.split('-').map((cc) => cc.slice(0, 1).toUpperCase() + cc.slice(1)).join(' '),
- // }));
-
- // const pagesPath = path.resolve('src/pages');
- // const examplesPath = path.resolve(pagesPath, 'examples');
- // const examplesRaw = await fs.readdir(examplesPath);
- // const examplesIndexPage = await Promise.all(
- // examplesRaw.map(async (c) => {
- // const indexPath = await path.resolve(examplesPath, c, 'index.tsx');
- // try {
- // const statResult = await fs.stat(indexPath);
- // return [c, statResult.isFile()];
- // } catch {
- // // noop
- // }
- //
- // return [c, false];
- // })
- // ) as [string, boolean][];
- // const examples = examplesIndexPage
- // .filter(([, hasIndexPage]) => hasIndexPage)
- // .map(([key]) => key);
- // props.examplePages = examples.map((e) => ({
- // id: e,
- // href: `/examples/${e}`,
- // label: e.split('-').map((ee) => ee.slice(0, 1).toUpperCase() + ee.slice(1)).join(' '),
- // }));
-
- // const typedocData = await fs.readFile('typedoc.data.json', 'utf-8');
- // const project = JSON.parse(typedocData) as any;
- //
- // props.componentPages = project.children.reduce(
- // (theComponents, pkg) => {
- // const packageNameFragments = pkg.name.split('-');
- // const packageFramework = packageNameFragments.pop();
- // const categoryBaseName = packageNameFragments.pop();
- //
- // console.log(packageFramework, categoryBaseName);
- //
- // if (theComponents.some((c) => c.name === categoryBaseName)) {
- // return theComponents.map((cc) => {
- // if (cc.name !== categoryBaseName) {
- // return cc;
- // }
- //
- // let components = [];
- // if (packageFramework === 'react') {
- // components = pkg.children
- // .filter((exported) => {
- // return exported.kind === 64; // Function, these are react components
- // })
- // .map((component) => {
- // return {
- // ...component,
- // id: component.name,
- // href: `/categories/${categoryBaseName}/${component.name}`,
- // label: component.name,
- // descriptionMarkdown: component.signatures[0].comment.summary.reduce(
- // (theText, t) => {
- // if (t.kind === 'text') {
- // return `${theText}${t.text}`;
- // }
- // if (t.kind === 'inline-tag' && t.tag === '@link') {
- // return `${theText}[${t.text}](#)` // TODO set URL
- // }
- // return theText;
- // },
- // ''
- // ),
- // };
- // });
- // }
- //
- // return {
- // ...cc,
- // name: categoryBaseName,
- // packages: {
- // ...(cc.packages ?? {}),
- // [packageFramework]: {
- // components,
- // },
- // },
- // };
- // })
- // }
- //
- // let components = [];
- // if (packageFramework === 'react') {
- // components = pkg.children
- // .filter((exported) => {
- // return exported.kind === 64; // Function, these are react components
- // })
- // .map((component) => {
- // return {
- // ...component,
- // id: component.name,
- // href: `/categories/${categoryBaseName}/${component.name}`,
- // label: component.name,
- // descriptionMarkdown: component.signatures[0].comment.summary.reduce(
- // (theText, t) => {
- // if (t.kind === 'text') {
- // return `${theText}${t.text}`;
- // }
- // if (t.kind === 'inline-tag' && t.tag === '@link') {
- // return `${theText}[${t.text}](#)` // TODO set URL
- // }
- // return theText;
- // },
- // ''
- // ),
- // };
- // });
- // }
- //
- // return [
- // ...theComponents,
- // {
- // name: categoryBaseName,
- // packages: {
- // [packageFramework]: {
- // components,
- // }
- // }
- // }
- // ]
- // },
- // [],
- // );
-
- return {
- props,
- };
- };
-
- export default InnerPage;
-
- export const getStaticPaths: GetStaticPaths = async () => {
- const docsPath = path.resolve('../../docs');
- const docs = await fs.readdir(docsPath);
-
- const categoriesPath = path.resolve('../../categories');
- const categories = await fs.readdir(categoriesPath);
-
- return {
- paths: [
- ...docs.map((d) => `/docs/${d}`),
- ],
- fallback: true,
- };
- };
|